<template>
    <fieldset>
        <legend>tab切换</legend>
        <button v-for="(btn,index) in buttons" :key="index" :class="['tab-button',{active:btn===activeBtn}]" @click="activeBtn=btn">{{btn}}</button>
        <div :is="dynamic" class="tab">123</div>
    </fieldset>
</template>
<script>
    import Email from './Email';
    import Mine from './Mine';
    import Home from './Home';
    import Charge from './Charge';
    export default {
        data(){
            return{
                buttons:["Email","Mine","Home","Charge"],
                activeBtn:"Email"
            }
        },
        computed: {
          dynamic(){
              return "tab-"+this.activeBtn
          }  
        },
        components:{
            "tab-Email":Email,
            "tab-Mine":Mine,
            "tab-Home":Home,
            "tab-Charge":Charge
        }
    }
</script>
<style scoped>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }

    .tab-button:hover {
        background: #e0e0e0;
    }

    .tab-button.active {
        background: hotpink;
    }

    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>
